<template>
  <div class="pdbt_100" :class="{ disabledForm: disabledEdit }">
    <div class="topSec">
      <div class="form-head-name">投保信息</div>
      <div class="flex_ac edit_btn" @click="$backRouter()">
        修改信息
        <van-icon style="margin-left: 3px" name="edit" />
      </div>
    </div>
    <CustomerInfoDesc />
    <div class="topSec">
      <div class="form-head-name">投保方案</div>
      <div class="flex_ac"></div>
    </div>
    <div>
      <InsurePlanModule
        v-for="(mainRisk, index) in mainInsu_e"
        :insuData="mainRisk"
        :key="`insur-list${index + totalPrem + new Date().getTime()}`"
      ></InsurePlanModule>
    </div>
    <template v-if="subInsu_e.length > 0">
      <div class="topSec">
        <div class="form-head-name">附加可选</div>
      </div>
      <div>
        <InsurePlanModule
          v-for="(mainRisk, index) in subInsu_e"
          :insuData="mainRisk"
          :key="`insur-list${index + totalPrem + new Date().getTime()}`"
        ></InsurePlanModule>
      </div>
    </template>
    <div class="fix_foot_box bottomBoxBar">
      <div class="cellBtns">
        <div class="feeBox">
          <span class="preNum">{{ totalPrem }}</span>
          <span class="ml2 ftc4 mt6">元</span>
        </div>
        <div class="sureBtn" @click="nextAction">下一步</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import InsurePlanModule from "./components/InsurePlanModule";
import CustomerInfoDesc from "./components/CustomerInfoDesc";
import { validRisksInfo } from "@/translate/validate/index";
import { GetRiskData } from "@/translate/risks/insert.js";
export default {
  name: "InsurePlanAlterSure",
  components: { InsurePlanModule, CustomerInfoDesc },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      assuredList: "insert/assuredList",
      mainInsu_e: "risks/mainInsu",
      subInsu_e: "risks/subRisk",
      totalPrem: "insert/totalPrem",
      showedRisks: "risks/showedRisks",
      effectiveDate: "page/effectiveDate",
      cont: "insert/cont",
    }),
  },
  created() {
    this.$store
      .dispatch("apis/getBillDetails", this.apiComParams)
      .then((data) => {
        let { cont, insureds } = data;
        if (cont && cont.totalPrem) {
          this.$store.commit("insert/UPDATE_PAYINFO", {
            totalPrem: cont.totalPrem,
          });
        }
        if (insureds && insureds[0]) {
          let risks = insureds[0].risks || [];
          if (risks.length > 0) {
            let risk = GetRiskData(risks);
            this.$store.commit("risks/SET_RISKS_DATA", risk);
          }
        }
        this.$store.dispatch("risks/setRisks", {});
      });
  },
  methods: {
    handleValidate(showedRisks) {
      let resObj = validRisksInfo(showedRisks, this.totalPrem);
      if (!resObj.status) {
        this.$baseAlert(resObj.msg);
        return false;
      }
      return true;
    },
    nextAction() {
      if (this.disabledEdit) {
        this.forbidChange();
        return;
      }
      // 险种提交前特殊校验
      if (!this.handleValidate(this.showedRisks)) return false;
      /**校验下附加险的自动续保有没有加上 添加提示 */
      let tipTxt = "";
      if (tipTxt) {
        return this.$baseConfirm(
          `${tipTxt}`,
          () => {},
          () => {
            this.saveRisksApi();
          },
          `重新选择`,
          "不选择"
        );
      }
      tipTxt =
        "请确认已选择险种的投保信息（保额、保费、缴费期间、保险期间、险种计划等）,核保后将无法修改。";
      this.$baseConfirm(
        `${tipTxt}`,
        () => {
          this.saveRisksApi();
        },
        () => {},
        `我已确认`,
        "再看看"
      );
    },
    saveRisksApi() {
      this.$store
        .dispatch("apis/riskSaveApi", this.apiComParams)
        .then((data) => {
          if (data.code == "1") {
            this.routerPath();
          } else {
            this.$baseAlert(data.msg);
          }
        });
    },
    routerPath() {
      this.$router.push("/billsure");
    },
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
.cell3_main {
  padding: 0 12px;
  background-color: #fff;
  .cell3Item {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    min-height: 40px;
    border-bottom: 1px solid #ededed;

    .cell3_label {
      display: flex;
      flex: 1;
      line-height: 1.3;
      color: #747474;
    }

    .cell3_value {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.edit_btn {
  width: 100.43px;
  height: 26px;
  opacity: 1;
  border-radius: 23px;
  background: linear-gradient(
    90deg,
    rgba(255, 125, 69, 1) 0%,
    rgba(255, 192, 125, 1) 100%
  );
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  color: #fff;

  &:active {
    opacity: 0.75;
  }
}
.pre_input_desc {
  color: #f54040;
  padding: 10px 14px;
  background-color: #fff0f0;
}
.bottomBoxBar {
  background-color: #fff;

  .cellBtns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 10px 12px;
    overflow: hidden;
    .feeBox {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      padding-right: 15px;
      font-size: 12px;
    }

    .preNum {
      font-weight: 600;
      font-family: MiSans;
      font-size: 24px;
      color: #d44438;
    }
    .sureBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 190px;
      height: 44px;
      border-radius: 44px;
      color: #fff;
      font-size: 18px;
      background-image: linear-gradient(to right, #ff462c, #cb1800);
      letter-spacing: 3px;
    }
  }
}
</style>
